import { GemsDom } from "../builder.js";

export class MsgList extends GemsDom {
  render() {
    this.on("msgListUpdate", () => {
      this.update();
      const { scrollHeight, scrollTop, clientHeight } = this.wrap;
      if (scrollTop + clientHeight > scrollHeight - 100) {
        this.ref(this.$state.msgListLast.id).scrollIntoView();
      }
    });
    this.style = `
            .self{
              height:100%;
              overflow-y:auto;
              overflow-x:hidden;
              padding:10rem 10rem;
              box-shadow:0 0 6rem #999 inset;
              box-sizing:border-box;
            }
            `;
    this.handle(() => {
      this.ref(this.$state.msgListLast.id).scrollIntoView();
    });
    return () => {
      return this.$state.msgList
        .map((item) => `<div ref="${item.id}">${item.content}</div>`)
        .join("");
    };
  }
}
export class MapList extends GemsDom {
  render() {
    this.style = `
    .self{
      height:100%;
      overflow-x:hidden;
      overflow-y:auto;
    }
    `;
    return () => {
      const currentMap = this.$state.gameCore.currentMap;
      const discoveredArea = currentMap.areas.filter(
        ({ hasDiscovered }) => hasDiscovered
      );
      return `${discoveredArea
        .map(({ name, typeLabel }) => `<div>${name}(${typeLabel})</div>`)
        .join("")}`;
    };
  }
}
export class ContentMain extends GemsDom {
  render() {
    this.style = `
        .self{
          height:100%;
          flex-direction: column;
          display:flex;
          overflow:hidden;
        }
        `;
    return () => {
      return `
      <div style="flex:4;overflow:hidden;">
        <map-list></map-list>
      </div>
      <div style="flex:3;overflow:hidden;">
        <msg-list></msg-list>
      </div>
      `;
    };
  }
}
